<template>
  <div class="pagination-container">
    <a-pagination
      size="small"
      v-model:current="pageSet.pageNo"
      :show-total="(total) => `共${total}条`"
      v-model:pageSize="pageSet.pageSize"
      :total="pageSet.total"
      show-size-changer
      show-less-items
      show-quick-jumper
      @change="pageChange"
      :pageSizeOptions="pageSizeOptions"
    />
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const props = defineProps({
  //分页参数配置
  pageSet: {
    type: Object,
    default: {
      pageNo: 1, //页码
      pageSize: 20, //每页条数
      total: 0 //总数
    }
  },
  //分页方法
  loadPagination: {
    type: Function,
    default: null
  }
});

const pageSizeOptions = ref(["10", "20", "50", "100", "200", "500", "1000"]);
const emits = defineEmits(["pageChange"]);

const pageChange = (page, pageSize) => {
  props.pageSet.pageNo = page ? page : 1;
  props.pageSet.pageSize = pageSize;
  if (props.loadPagination) {
    props.loadPagination();
  }
  emits("pageChange", {page, pageSize});
};
</script>

<style lang="less" scoped></style>
